<script setup lang="ts">
import { ref, computed, provide, onMounted, onUnmounted } from 'vue'
import AppLayout from './components/AppLayout.vue'
import RealNetworkSurvey from './components/RealNetworkSurvey.vue'
import AvailableAttackResources from './components/AvailableAttackResources.vue'
import DnsDashboard from './components/DnsDashboard.vue'
import TopologyDesigner from './components/TopologyDesigner.vue'
import AttackEffectMonitor from './components/AttackEffectMonitor.vue'
import ControlCenter from './components/ControlCenter.vue'
import IpGeoMap from './components/IpGeoMap.vue'

type MenuKey =
  | 'control_center'
  | 'survey'
  | 'available_attack_resources'
  | 'dns_dashboard'
  | 'topology_designer'
  | 'attack_effect_monitor'
  | 'ip_geo_map'

const activeKey = ref<MenuKey>('control_center')

// 用于传递攻击目标IP到监控页面
const attackTargetIp = ref<string>('')

// 用于传递服务器IP到监控页面（用于自动选择WebSSH服务器）
const serverIp = ref<string>('')

// 提供全局方法供子组件使用
const navigateToAttackEffect = (ip: string) => {
  attackTargetIp.value = ip
  activeKey.value = 'attack_effect_monitor'
}

provide('navigateToAttackEffect', navigateToAttackEffect)

const componentMap = {
  control_center: ControlCenter,
  survey: RealNetworkSurvey,
  available_attack_resources: AvailableAttackResources,
  dns_dashboard: DnsDashboard,
  topology_designer: TopologyDesigner,
  attack_effect_monitor: AttackEffectMonitor,
  ip_geo_map: IpGeoMap,
} as const

const ActiveComp = computed(() => componentMap[activeKey.value])

// 处理导航
function handleNavigation(key: MenuKey) {
  activeKey.value = key
  
  // 如果导航到打击效果评估页面，尝试从localStorage恢复攻击目标IP
  if (key === 'attack_effect_monitor' && (!attackTargetIp.value || !attackTargetIp.value.trim())) {
    try {
      const savedState = localStorage.getItem('topology-designer-state')
      if (savedState) {
        const state = JSON.parse(savedState)
        if (state.attackTarget && state.attackTarget.ip) {
          attackTargetIp.value = state.attackTarget.ip
          console.log('从localStorage恢复攻击目标IP:', attackTargetIp.value)
        }
      }
    } catch (error) {
      console.error('从localStorage读取攻击目标IP失败:', error)
    }
  }
}

// 监听导航事件（用于ControlCenter等组件通过CustomEvent导航）
function handleNavigate(event: CustomEvent) {
  const pageKey = event.detail?.page
  const serverIpParam = event.detail?.serverIp
  
  if (pageKey && (pageKey in componentMap)) {
    activeKey.value = pageKey as MenuKey
    
    // 如果传递了服务器IP，保存它以便传递给AttackEffectMonitor
    if (serverIpParam && pageKey === 'attack_effect_monitor') {
      serverIp.value = serverIpParam
      console.log('[App] 接收到服务器IP参数:', serverIpParam)
    } else if (pageKey !== 'attack_effect_monitor') {
      // 如果导航到其他页面，清空serverIp
      serverIp.value = ''
    }
  }
}

onMounted(() => {
  window.addEventListener('navigate', handleNavigate as EventListener)
  // SSE连接已改为页面级别管理，不再在应用级别启动
})

onUnmounted(() => {
  window.removeEventListener('navigate', handleNavigate as EventListener)
  // SSE连接已改为页面级别管理，不再在应用级别停止
})

</script>

<template>
  <AppLayout 
    :activeKey="activeKey" 
    @update:activeKey="handleNavigation"
  >
    <!-- 页面内容 -->
    <ControlCenter v-if="activeKey === 'control_center'" />
    <AttackEffectMonitor v-else-if="activeKey === 'attack_effect_monitor'" :targetIp="attackTargetIp" :serverIp="serverIp" />
    <component v-else :is="ActiveComp" />
  </AppLayout>
</template>

